废话不多说，直接切入正题。
##什么是浮动？
浮动是 CSS 中定位所使用的属性。属性值名为 float，有四种取值，其中用得最为广泛的就是 left 和 right。
看字面意思就知道，一个是向左浮动，一个是向右浮动。在定位或布局中会大量地使用浮动属性，
因此深入了解float 属性是非常必要的。
##浮动的规则
浮动元素自成一流，以往文本流的规则在它身上并不适用。
###浮动元素脱离了文本流
“浮动”在文档流之上。它不仅会影响布局，而且会影响内容的排版。
非匿名文本会围绕浮动元素显示。如下图
###浮动元素的外边距不会合并。
很多人认为浮动元素脱离了文本流，那么就是在文本流的“上一层”。
但是事实却并非如此，假设浮动元素在同一层，那么根据水平格式化，左右外边距应该合并才对
但是结果如下图
可见，两个浮动元素之间有 20 px 的外边距，说明浮动元素的外边距是不会合并的。
因此我建议开发人员在使用浮动元素时运用 z-index 来管理，控制浮动元素的表现。
###浮动元素自动拥有块级元素属性
元素一旦被设置为浮动，会自动生成块级框，表现为块级元素。
所以没有必要为浮动元素设置为 display : block; 或 display ： inline-block; 。
如下图
一个行内元素，本来并不接受 width 等属性，但是被设置为浮动后，变成了块级表现形式。
###浮动元素不重叠
浮动元素会跟随在上一个浮动元素之后，下一个浮动元素的左边界不会出现在上一个浮动元素的右边界的左边。
这个规则避免了浮动元素的重叠。
宽度不足会自动到下一层级，不会发生重叠。
但是凡事有例外，如果遇到元素有设置负外边距，那就是另一回事了。
####如果发生重叠呢？
如果通过设置属性，比如负外边距等手段，让浮动元素与文本流元素重叠，那么它会以怎样的形式表现呢？
如果浮动与行内元素重叠，那么行内元素的背景，行框，内容都会在浮动元素“之上”。如下图
如果浮动元素与块级元素重叠，那么块级元素的背景，框会在浮动元素“之下”，内容在浮动元素“之上”。
如下图
###浮动的停止条件
浮动元素遇到父级元素的内边界就会停止浮动，不会浮动到更高的地方。
举个形象的栗子就是，像气球浮动到天花板就不会再浮动了。
main 元素 有 padding-left：10px；
###浮动元素的延伸
如果父级元素与子元素同为浮动元素，如果子元素高度或宽度大于父元素的高度或宽度，
那么父元素会自动延伸包住子元素。
##清除浮动
###什么是清除浮动？
像上面所说的浮动元素的负外边距等的影响导致的浮动元素的重叠现象，虽然不影响内容的展示，
但是影响了布局的美观。因此就要清除浮动元素在元素“上”的现象。
除此之外，还可以让元素自动包裹。
###为什么要清除浮动？
在布局的过程中，难免会遇到各种情况。
比如，父级元素不需要浮动，但是子元素需要浮动来达到布局需要，
但是，一旦这样设置子元素浮动，父元素不浮动，
就会发生父级元素的“高度坍塌”现象，因为父元素没有相应的元素“撑”起他的盒子模型。
而对父元素设置高度又显然不适合自适应布局和流式布局或浮动布局的思想。这时候，
就需要用到清除浮动了。
###清除浮动的方法
这里只是浅谈，作为个人学习笔记记录，更多大师级的博文链接在本博文后贴出。
清除浮动需要用到 clear 属性。1
clear : left|right|both; //常用的三种属性值。
从字面意思就可以知道效果，分别从左边，右边，两边清除浮动。
需要特别注意的是，清除浮动会有一个清楚区域的出现。这个区域会让元素移到浮动元素的下边界处。
如果浮动元素和另外的元素需要间距，不妨增加浮动元素的下边界或增加其他元素的上边界。
方法一、在需要清除浮动的地方增加一个标签（ br 或 其他标签），清除浮动。
利用 clear 或 br 独特的 clear 属性。
但是不推荐使用这种方法，布局并没有与结构解耦，新增了不必要的标签。1
2
3
4
5
6
7
8<div class="float1">
<h2>1）添加额外标签</h2>
<div class="main left">main{float:left;}</div>
<div class="right">side{float:right;}</div>
<div style="clear:both;"></div>
<br clear="all"> //与上一个标签作用相同
</div>
<div class="footer">footer</div>
方法二、父级元素也设置浮动属性。这个可以解决高度坍塌的问题，这也就是浮动带来的一部分 BUG。
但是 Jarvis 并不觉得这是解决问题的办法，因为父级元素也设置浮动只适用于极少极少情况，例如
自己写 demo 的时候。但是这样会给布局带来混乱的局面。
方法三、使用伪元素清除浮动。保持了代码的整洁性，消除了增加一些不必要的标签。
运用的好可以增加代码的复用率。1
2
3
4
5
6
7
8
9
10.clearfix {
*zoom: 1;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
demo 地址：
Jarvis 的 demo 地址
博文地址：
大漠的清除浮动博文 Clear float
清除 clearfix 改良
那些年一起清除的浮动
作者 张翔
2016 年 01月 22日